<template>
    <a :class="['nut-cell',{'nut-cell-link':isLink}]" :style="{'background-color':bgColor}" @click="myClick()">
        <div class="nut-cell-box">
            <div class="nut-cell-left" style="text-align: left">
                <span class="nut-cell-title"><slot name="title">{{title}}</slot></span>
                <span class="nut-cell-sub-title"><slot name="sub-title">{{subTitle}}</slot></span>
            </div>
            <div class="nut-cell-right">
                <span class="nut-cell-desc"><slot name="desc">{{desc}}</slot></span>
                <span class="nut-cell-icon"><slot name="icon" v-if="showIcon"><img src="data:image/svg+xml,%3Csvg viewBox='0 0 5 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.215 9.757l3.577-4.17a.931.931 0 0 0 0-1.173L1.215.244a.642.642 0 0 0-1.007 0 .929.929 0 0 0 0 1.172L3.283 5 .208 8.584a.93.93 0 0 0 0 1.173.643.643 0 0 0 1.007 0z' fill='rgb(200,200,205)'/%3E%3C/svg%3E" alt=""></slot></span>
            </div>
        </div>
    </a>
</template>

<script>
    /* eslint-disable no-console */

    export default {
        name: "my-cell",
        props: {
            title: {
                type: String,
                default: ""
            },
            subTitle: {
                type: String,
                default: ""
            },
            desc: {
                type: String,
                default: ""
            },
            isLink: {
                type: Boolean,
                default: false
            },
            linkUrl: {
                type: String,
                default: null
            },
            showIcon: {
                type: Boolean,
                default: false
            },
            bgColor: {
                type: String,
                default: "#FFFFFF"
            }
        },
        data() {
            return {};
        },
        methods: {
            myClick:function () {
                console.log("------------------my-cell------------------");
                this.$emit('myClickHandler');
            }
        }
    }
</script>

<style scoped>
    .nut-cell .nut-cell-title {
        display: block;
        line-height: 1.5;
        font-size: 17px;
        color: #2D2D2D;
    }
    .nut-cell {
        display: block;
        padding: 0 15px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        border-bottom: 1px solid #DDDFE6;
        border-top: 0;
        height: 40px;
    }
    .nut-cell .nut-cell-box {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        min-height: 40px;
        background-image: -webkit-linear-gradient(rgba(218, 218, 218, 0.5), rgba(218, 218, 218, 0.5));
        background-image: linear-gradient(rgba(218, 218, 218, 0.5), rgba(218, 218, 218, 0.5));
        background-size: 100% 1px;
        background-repeat: no-repeat;
        border-bottom: 0px solid white;
    }
    .nut-cell .nut-cell-right {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        font-size: 14px;
        color: #c9cbd1;
    }

</style>